<template>
	<view class='box'>
		<view class="change-title">
			输入新的手机号
		</view>
		<view class='zcRelative uni-flex info-list'> 
			<input type="number" @input="doGetTelephone" maxlength="11" placeholder="请输入手机号">
			<!-- <picker class='picker uni-flex zcAlignI_center zcJustifyC_center' mode="selector" :range="city.pickers" @change="doChangeCity">
				<view class='uni-flex zcAlignI_center zcJustifyC_center picker_view'>{{city.pickers[city.value]}}</view>
			</picker> -->
		</view>
			<view class='zcRelative uni-flex info-list'> 
			<!-- <view> +86</view> -->
			<input type="text" @input="doGetVerifyCode" placeholder="请输入验证码">
			<button class="vertifyCode" type="primary" :disabled="isVerifyCodeLoading" @tap="doGetTelephoneVerifyCode" >{{isVerifyCodeLoading?num:''}}{{text}}</button>
		</view>
			<button class="btn" type="primary" @tap="zcChangeUserTelephone" >确认更换</button>
		
	</view>
</template>

<script>
	let _this;
	export default {
		data() {
			return {
				Telephone:'',
				VerifyCode:'',
				isVerifyCodeLoading:false,
				num:60,
				text:'获取验证码',
				clearNumber:0
			}
		},
		onLoad() {
			_this = this;
		},
		methods: {
			doGetTelephone(res) {
				// console.log('doGetTelephone = ',res.detail.value);
				_this.Telephone = res.detail.value;
			},
			doGetVerifyCode(res) {
				// console.log('doGetVerifyCode = ',res.detail.value);
				_this.VerifyCode = res.detail.value;
			},
			// 	获取验证码接口
			doGetTelephoneVerifyCode() {
				if (!_this.Telephone) {
					uni.showModal({
						title: '温馨提示',
						content: '尊敬的用户，请输入手机号！'
					});
					return;
				}
				_this.isVerifyCodeLoading = true;
				_this.text = '重新获取'
				
				_this.clearNumber = setInterval(function () {
					_this.num = _this.num-1;
					if (_this.num === 0) {
						_this.num = 60;
						_this.isVerifyCodeLoading = false;
						clearInterval(_this.clearNumber);
					}
				},1000)
					
				_this.$ZcPublic.Server.Post({
					IsNeedLogin: 'false',//根据需求而定
					Paras: {
					    Name: 'uni_Insure_Detail',
					    Action: 'Ext_getTelephoneVerifyCode',
					    Data: {
							Telephone:_this.Telephone
						}
					},
					Callback: function(resjson,scope) {
						if (resjson.state === 'back') {
							console.log('验证码 = ',resjson.data);
							if (!resjson.success) {
								uni.showModal({
									title:'温馨提示',
									showCancel:false,
									content:''+resjson.msg
								})
								_this.num = 60;
								_this.isVerifyCodeLoading = false;
								_this.text = '重新获取';
								clearInterval(_this.clearNumber);
								return;
							}
						}
                        if (resjson.state === 'end') {
                            uni.hideLoading();
                        }
						
					},
					Scope: _this
				})
			},
			//	更换手机接口
			zcChangeUserTelephone() {
				if (!_this.Telephone) {
					uni.showModal({
						title: '温馨提示',
						content: '尊敬的用户，请输入手机号！'
					});
					return;
				}
				if (!_this.VerifyCode) {
					uni.showModal({
						title: '温馨提示',
						content: '尊敬的用户，请输入验证码！'
					});
					return;
				}
				
				
				_this.$ZcPublic.Server.Post({
					IsNeedLogin: 'true',//根据需求而定
					Paras: {
					    Name: 'uni_Insure_Detail',
					    Action: 'Ext_ChangeUserTelephone',
					    Data: {
							Telephone:_this.Telephone,
							VerifyCode:_this.VerifyCode
						}
					},
					Callback: function(resjson,scope) {
						if (resjson.state === 'back') {
							console.log('更换成功 = ',resjson.data);
							if (!resjson.success) {
								uni.showModal({
									title:'温馨提示',
									showCancel:false,
									content:''+resjson.msg
								})
								return;
							}
							
							uni.showToast({
								title: '手机号已更换成功！',
                                duration:3000,
                                success() {
                                    setTimeout(()=>{
                                        clearTimeout();
                                        uni.navigateBack();
                                    },1000)
                                }
							});
                            
                            
						}
						
					},
					Scope: _this
				})
			}
			
			
		}
	}
</script>

<style>
	.zcModel-card{background-color: #FFFFFF;padding: 20upx;}
	.zcModel-card-item{border: 4upx solid #e5e5e5;border-radius: 10upx;padding: 10upx;margin: 10upx 0;}
	.zcModel-card-item input{flex: 1;}
	.zcModel-card .button-hover{opacity: 0.6;}
	.icon-mima:before{
		content: "\e666";
		color: #3ca4fa;
		margin: 0 20upx;
		font-size: 28upx;
		font-weight: bold;
	}
	.icon-shouji:before{
		content: "\e638";
		color: #3ca4fa;
		margin: 0 20upx;
		font-size: 28upx;
		font-weight: bold;
	}
	.icon-ecurityCode:before{
		content: "\e611";
		color: #3ca4fa;
		margin: 0 20upx;
		font-size: 28upx;
		font-weight: bold;
	}
	.icon-chakan:before{
		content: "\e61e";
		color: #3ca4fa;
		margin: 0 20upx;
		font-size: 28upx;
		font-weight: bold;
	}
	
	.zcFooter-but{position: fixed;bottom: 0;left: 0;width: 100%;z-index: 10;background-color: #F4F5F6!important;}
	.zcFooter-but button:first-child{flex: 1;border: 2upx solid #3CA4FA;color: #3CA4FA;border-radius: 0;}
	.zcFooter-but button:last-child{flex: 1;background-color: rgba(60, 164, 250, 1);color: #FFFFFF;border-radius: 0;}
	.zcFooter-but .button-hover:last-child{color: rgba(250, 250, 250, 0.6);}
	
	.zcPopupBox-but button{width: 200upx; padding: 23upx 10upx;background-color: rgba(60, 164, 250, 0.12);border: 2upx solid #3ca4fa;color: #3ca4fa;line-height: 1;font-size: 30upx;margin-left: 20upx;flex-shrink: 0;}
/* 2019-10-28修改 */
.box{
	position: absolute;
  top: 0;
	width: 100%;
	bottom: 0;
	background: #fff;
}
.change-title{
	height: 200upx;
	line-height: 290upx;
	font-size: 34upx;
	font-weight: 500;
	padding-left: 70upx;
}
.info-list{
	height: 80upx;
	margin: 30upx 70upx;
	border-bottom: 5upx solid #3CA4FB;
	line-height: 140upx;
}
.info-list button[disabled] {color: #999999!important;background-color: #F5F5F5!important;}
.info-list input{
	flex: 1;
	height: 80upx;
	font-size: 28upx;
	font-weight: 400;
}
.info-list>view:first-child{
	flex:0 0 70upx;
	height: 80upx;
	line-height: 80upx;
}
.picker_view{
	color:#3CA4FB
}
.btn{
	background-color:  #3CA4FB !important;
	margin:80upx 70upx ;
	border-radius: 30upx;
}
.vertifyCode{
	padding:5upx 20upx ;
	background-color: #3CA4FB !important;
	color:#fff;
	height: 68upx;
	width: 36%;
	line-height: 60upx !important;
	border-radius: 10upx;
	font-size: 28upx !important;

}
</style>
